<!doctype html>
<html lang="zh-Hans-CN">

<head>
    <meta charset="utf-8"/>
    <meta name="format-detection" content="telephone=no"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, viewport-fit=cover">
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <title>夏翎教育</title>
    <link rel="stylesheet" href="/ui/mobile/iconfont/iconfont.css">
    <link rel="stylesheet" href="/ui/mobile/css/ui.all.css"/>
    <link rel="stylesheet" href="/ui/mobile/css/style.css" type="text/css"/>
</head>

<body>
<div class="c-main">
    <section class="p12">
        <header></header>
        <div class="indx-box">
            <div class="indx-title">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-fuwu"></use>
                </svg>
                <p>教育培训</p>
            </div>
            <ul data-wrap="list" class="indx-list"></ul>
        </div>
    </section>

    <footer class="footer"></footer>
</div>
<script type="text/javascript" src="/m/public/all.ui.js"></script>
<script src="/ui/mobile/iconfont/iconfont.js"></script>
<script src="/m/public/util.js"></script>

<link rel="stylesheet" href="/ui/mobile/widget/Swiper/4.4.2/css/swiper.min.css"/>
<script type="text/javascript" src="/ui/mobile/widget/Swiper/4.4.2/js/swiper.min.js"></script>

<script src="/m/public/getFooterWidget.js"></script>

<script type="text/javascript">
    $('footer').html(getFooterWidget("index"));

    initIndexBanner();

    let currPage = 1;
    let totalPage = 1;
    const pageSize = 15;
    let reqFinish = true;

    //初始化加载
    reqFinish = false;
    initQuestionList(() => {
        reqFinish = true;
    });

    $(window).scroll(function () {
        const scrollTop = $(this).scrollTop();
        const scrollHeight = $(document).height();
        const windowHeight = $(this).height();

        if (scrollTop + windowHeight >= scrollHeight) {
            if (currPage + 1 > totalPage) {
                return;
            }
            if (!reqFinish) {
                return;
            }

            reqFinish = false;
            currPage += 1;
            initQuestionList(() => {
                reqFinish = true;
            });
        }
    });


    const $listWrap = $('[data-wrap="list"]');


    function initQuestionList(callback = Function()) {
        queryQuestionPage({
            disableFlag: 0
        }, ({Code, Message, Result: list = [], Total: total}) => {
            if (Code !== 10000) {
                totalPage = 1;
                callback();
                return $listWrap.html(`<p class="page-end">${Message}</p>`);
            }

            if (!list || !list.length) {
                totalPage = 1;
                callback();
                return $listWrap.html(`<p class="page-end">没有更多了 ~</p>`);
            }

            totalPage = Math.ceil(total / pageSize);

            if (currPage === 1) {
                $listWrap.html("");
            }

            list.forEach(info => {
                $listWrap.append(getQuesCard(info));
            })

            callback();
        })

        function getQuesCard({questionId, questionTitle, questionIntro, adImgUrl, price}) {
            const $dom = $(`
                <li>
                    <a href="javascript:" class="list-box">
                        <div class="list-pic">
                            <svg class="icon" style="width: 80%;height: 80%" aria-hidden="true">
                                <use xlink:href="#icon-yuyuexinxi"></use>
                            </svg>
                        </div>
                        <div class="list-cont">
                            <p class="list-tit">${questionTitle}</p>
                            <div class="list-des">
                                <p style="overflow: hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;">${questionIntro || ""}</p>
                            </div>
                            <p class="list-price">¥${(price / 100).toFixed(2)}</p>
                        </div>
                    </a>
                </li>

            `);

            $dom.on("click", () => {
                if (adImgUrl) {
                    location.href = "/m/question/ad.html?" + $.param({questionId})
                } else {
                    location.href = "/m/question/form.html?" + $.param({questionId})
                }
            });

            return $dom;
        }
    }

    /**
     * 初始化首页广告
     */
    function initIndexBanner() {
        queryIndexBannerList({}, ({Result: bannerList = []}) => {
            if (!bannerList || !bannerList.length) {
                return;
            }

            const $bannerDom = $(`
                <div class="swiper-container indx-swiper">
                    <div data-cont="banner" class="swiper-wrapper"></div>
                    <div class="swiper-pagination"></div>
                </div>
            `);

            $('header').html($bannerDom);

            const $bannerCont = $bannerDom.find('[data-cont=banner]');
            bannerList.forEach(({imgUrl, targetUrl}) => {
                $bannerCont.append(`
                    <div class="swiper-slide">
                        <a href="${targetUrl || 'javascript:'}"><img src="${imgUrl}" alt=""></a>
                    </div>
                `)
            });

            new Swiper('.indx-swiper', {
                pagination: {
                    el: '.swiper-pagination',
                },
                autoplay: {
                    delay: 3500,
                    stopOnLastSlide: false,
                    disableOnInteraction: false
                },
                loop: true
            })


        })
    }

    function queryQuestionPage(param, callback = Function()) {
        return $.sApi({
            data: param,
            url: "/api/Question/queryQuestionPage"
        }, callback)
    }

    function queryIndexBannerList(param, callback = Function()) {
        return $.sApi({
            data: param,
            url: "/api/IndexBanner/queryIndexBannerList"
        }, callback)
    }

</script>

</body>
</html>